<template>
    <div class="header">
        <div class="header-left">
            <span class="iconfont">&#xe624;</span>
        </div>
        <div class="header-search">
            <span class="iconfont">&#xe632;</span>
            输入城市 / 景点 / 游玩主题
        </div>
        <router-link to="/city" tag="div">
            <div class="header-right">
                {{city}}
                <span class="iconfont">&#xe6aa;</span>
            </div>
        </router-link>
    </div>
</template>

<script>

export default {
    computed : {
        city : function(){
            return this.$store.getters.getCity
        }
    }
}
</script>

<style scoped lang="stylus">

@import '~css/var.styl'

.header{ display: flex; width:100%; height:0.88rem; line-height:0.88rem; background:$bgColor; font-size:0.28rem; color:$textColor;
    
    .header-left{ width:0.4rem; padding: 0 0.2rem; text-align: center; font-weight: bold;}

    .header-search{ flex:1; background:#fff; height:0.6rem; padding-left:0.2rem; line-height:0.6rem; margin:0.14rem 0; border-radius:0.1rem; color:#e4e7ea; font-size:0.28rem;}

    .header-right{ padding: 0 0.2rem;}

 }

</style>


